Skip to content

[당근마켓 클론코딩] 이정혁 미션 제출합니다.#3

Open
GAMZAMANDU wants to merge 24 commits intoinsertcourse24:mainfrom
GAMZAMANDU:gamzamandu
Open

[당근마켓 클론코딩] 이정혁 미션 제출합니다.#3
GAMZAMANDU wants to merge 24 commits intoinsertcourse24:mainfrom
GAMZAMANDU:gamzamandu

Conversation

@GAMZAMANDU
Copy link
Copy Markdown

@GAMZAMANDU GAMZAMANDU commented Jul 8, 2024

흥미있었던 점:
article을 추가하는 코드가 번거로울 것 같아 웹 컴포넌트를 찾아 사용해보았는데,
다른 라이브러리 없이도 컴포넌트를 쓸 수 있다는 점이 흥미로웠습니다.

어려웠던 점:
position에 대한 사용이 익숙치않아 작은 어려움이 있었습니다.

궁금한 점:
클론코딩을 하며 파일정리를 조금 해보았는데,
실제 프로젝트를 할 때는 어떤 식으로 파일 정리를 하는지 궁금했습니다.

@kimsiyeon0223
Copy link
Copy Markdown
Contributor

kimsiyeon0223 commented Jul 11, 2024 •
edited
Loading

굿모닝입니당.
우와!!!! 정말 정말 수고하셨습니다~~
시멘틱태그를 지향하는 모습이 정말 아름답습니다.
웹 컴포넌트라는 개념을 이해하는 데에 있어 조금 복잡하고 힘드셨을 것이라 예상합니다... 쉬웠다면 당신은 천재?ㅋㅋ....
어려웠던 점에 position에 관한 내용이 있으신 데 position보다는 flex라는 개념을 지향하셨으면 좋겠습니다~
flex를 사용하면 좀 더 간단하게 정렬할 수 있고, 반응형 웹 디자인을 지원하는데 아주 유용하다는 장점 등등 이것은 flex를 공부해 보면서 알아가면 좋을 것 같습니다. 밑에 링크도 참고해 주세요.
https://studiomeal.com/archives/197
실제 프로젝트 할 때는 다양한 폴더 구조를 사용하기 때문에 때때로 다를 수 있는데요.
html을 사용한 웹 사이트를 제작할 때는 보통 하나의 상위 폴더 안에 같은 형식의 파일들을 모아서 저장합니다.

ㄴhtml
     ㄴ index.html
ㄴimg
     ㄴ daangn.png
ㄴ css
      ㄴ style.css
      ㄴ default.css
ㄴ scripts
      ㄴ script.js

위와 같은 형태로요!!
다양한 파일 구조에 대해 알아보시는 것도 좋을 것 같다고 생각합니다!!
다시 한번 수고하셨고, 다음 미션도 화이팅~

anys34
anys34 approved these changes Jul 12, 2024
View reviewed changes
Copy link
Copy Markdown

@anys34 anys34 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다

Comment thread mission/static/index-tab/index.html Outdated
Copy link
Copy Markdown

@anys34 anys34 Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

svg를 import하는 부분을 좀 더 생각하면 좋을 것 같습니다.

kimsiyeon0223
kimsiyeon0223 approved these changes Jul 12, 2024
View reviewed changes
Comment thread mission/script.js
div.innerHTML += `<card-comp
title="${dataa.name}"
price="${dataa.price}원"
price="20000원"
Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저희가 미리 만들어둔 data.json을 이용해 미션을 완수해주세요ㅠㅠ

Comment thread mission/static/joongo-tab/joongo.html Outdated
<div id="header-div">
<div id="header-left">
<a href="/mission/static/index-tab/index.html">
<svg
Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 svg 코드를 다 가져와 사용하게 되면 코드가 무자비하게 길어지고, 가독성이 떨어집니다.

<img src="hihi.svg(이미지 경로)" alt="hihi img" />

와 같이 img태그를 사용해주세요!

Comment thread mission/static/joongo-tab/joongo.html Outdated
<div class="download-btns">
<a href="" class="store-btn">
<svg
width="18"
Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이것도 위에 코멘트와 같습니다~

Comment thread mission/static/joongo-tab/joongo.html Outdated
<script src="../../script.js"></script>
</body>
<div id="lang-select">
<svg
Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이것두요

Comment thread mission/static/index-tab/section.css Outdated
#home-main-desc > h1 {
margin-bottom: 32px;
padding-top: 200px;
margin-top: 200px;
Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

되도록이면 margin보다는 padding을 지향해주세용

Comment thread mission/static/joongo-tab/keywords.css Outdated
#fleamarket-keywords {
width: 100%;
height: 104px;

Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

불필요한 공백들을 제거해주세요

Comment thread data.json Outdated
{
"id": 1,
"img": "./assets/kitty.png",
"img": "/assets/kitty.png",
Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data.json파일은 고치시면 안됩니다ㅠ 저희가 만들어둔 데이터를 써주세요

Comment thread mission/header.css Outdated
background-color: #ffffff;
height: 64px;
width: 1680px;
max-width: 100vw;
Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

단위들을 통일시켜주세요!!
반응형 웹을 만들려면 px은 피해주세요!!
반응형에 대해 공부해보시는 것이 좋을 것 같습니다~

Comment thread mission/index.html Outdated
<section>
<div id="home-main-top">
<div id="home-main-desc">
<h1>당신 근처의<br />지역 생활 커뮤니티</h1>
Copy link
Copy Markdown
Contributor

@kimsiyeon0223 kimsiyeon0223 Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

br은 지양해주세요

@winternuary
Copy link
Copy Markdown
Contributor

winternuary commented Jul 12, 2024

너무 수고많으셨습니다! 직접 파일정리를 해보셨다니 너무나도 대단해요
json을 map으로 보여주는 부분도 척척 잘 해 나가신 것 같아 멋있습니다...
다음 미션도 화이팅 입니다!

@GAMZAMANDU
Copy link
Copy Markdown
Author

GAMZAMANDU commented Jul 23, 2024

피드백 내용 수정했습니다

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@anys34 anys34 anys34 approved these changes

@kimsiyeon0223 kimsiyeon0223 kimsiyeon0223 approved these changes

@seonghoon07 seonghoon07 Awaiting requested review from seonghoon07

@winternuary winternuary Awaiting requested review from winternuary

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@GAMZAMANDU @kimsiyeon0223 @winternuary @anys34